<!DOCTYPE html>
<html lang="en">

<head id="Head1">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>用户登录--中国图书网</title>
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/resert.css">
    <script src="./libs/jquery-1.11.1.js"></script>
    <script src="./libs/jquery-validation/jquery.validate.js"></script>
    <script src="./libs/layer/layer.js"></script>

    <style>
        label.error {
            color: #e60000;
            position: absolute;
            left: 0px;
            top: 40px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="loginHead">
        <div class="loginBar">
            <div class="loginBarInner">
                <div class="log fl">
                    <h1>
                        <a href="" title="中国图书网">
                            <img src="./images/login.images/logo5.jpg" alt="中国图书网">
                        </a>
                    </h1>
                </div>
                <div class="ad fr ">
                    <span class="zhengbang fs12">正版好图书</span>
                    <span class="liujiu fs12">全场满69包邮</span>
                    <span class="yizhe fs12">特价书一折起</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 登录 -->
    <div class="content loginWrap">
        <div class="w1000">
            <form class="loginForm">
                <div class="loginTitle fs22">
                    <b>用户登录</b>
                </div>
                <div class="longinInputWrap">
                    <div class="inputItem">
                        <div class="labInpWr">
                            <!---用户名:-->
                            <div class="label fl">
                                <span>用户名:</span>
                            </div>
                            <!---输入框-->
                            <div class="inputWrap fl">
                                <span class="inputPad">
                                    <input type="text" name="uphone" class="inputBlock" value autocomplete="off"
                                        id="userName" placeholder="用户名/邮箱/已验证手机">
                                </span>
                                <!-- ??? -->
                                <span class="clearInput" style="display: none;"></span>
                            </div>
                        </div>
                        <!--提示文字-->
                        <div class="megTip">
                            <span>请输入用户名/邮箱/已验证手机</span>
                        </div>
                    </div>
                    <div class="inputItem">
                        <div class="labInpWr">
                            <!---用户名:-->
                            <div class="label fl">
                                <span>密码:</span>
                            </div>
                            <!---输入框-->
                            <div class="inputWrap fl">
                                <span class="inputPad">
                                    <input type="password" name="upwd" class="inputBlock" placeholder="密码">
                                </span>
                                <!-- ??? -->
                                <span class="clearInput" style="display: none;"></span>
                            </div>
                        </div>
                        <!--提示文字-->
                        <div class="megTip">
                            <span>请输入密码</span>
                        </div>
                    </div>
                    <div class="inputItem">
                        <div class="labInpWr">
                            <!---用户名:-->
                            <div class="label fl">
                                <span>验证码:</span>
                            </div>
                            <!---输入框-->
                            <div class="inputWrap fl imgCodeWrap">
                                <span class="inputPad">
                                    <input type="text" class="inputBlock" value autocomplete="off" placeholder="图片验证码">
                                </span>
                                <!-- ??? -->
                                <span class="clearInput" style="display: none;"></span>
                            </div>
                            <!-- 验证码图片 -->
                            <div class="imgWrap fl">
                                <img src="./images/login.images/QQ截图20210106155939.jpg" alt="">
                            </div>
                            <div class="changeImgCoad fl fs14">
                                <a href="">换一换</a>
                            </div>
                        </div>
                        <!--提示文字-->
                        <div class="megTip">
                            <span>请填写图中的字符,不区分大小写</span>
                        </div>
                    </div>
                    <button class="loginBtn" id="loginBtn" style="padding: 0;border:0px;">
                        <a>登录</a>
                    </button>
                    <div class="otherLink">
                        <a href="" target="_blank" class="fogotPas fl">忘记密码?</a>
                        <a href="" target="_blank" class="newUserReg fr">新用户注册</a>
                    </div>
                    <div class="otherLoginWrap">
                        <div class="therLoginTit">
                            <span>使用以下账号登录</span>
                        </div>
                        <div class="otherLogin fl">
                            <a href="" class="tsinalogin fl fs14" id="tsinalogin">
                                <span class="icon"></span>
                                微博
                            </a>
                            <a href="" class="qqlogin fl fs14" id="qqlogin">
                                <span class="icon"></span>
                                QQ
                            </a>
                            <a href="" class="wxlogin fl fs14" id="wxlogin">
                                <span class="icon"></span>
                                微信
                            </a>
                            <a href="" class="baidulogin fl fs14" id="baidulogin">
                                <span class="icon"></span>
                                百度
                            </a>
                        </div>

                    </div>
                    <div class="explainLink fs14">
                        <a href="" target="_blank">
                            QQ、微博、百度登录绑定微信账号的解决方案
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <!-- 底部 -->
    <div class="loginRegistFoot">
        <div class="footNav">
            <ul>
                <li><a href="">本站简介</a></li>
                <li><a href="">帮助中心</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">招聘英才</a></li>
            </ul>
        </div>
        <div class="certifica">
            <div class="width820 clearfix">
                <div class="credit_certifica fl">
                    <a href="" target="_blank" title="中国图书网城信认证" class="chengxin1 fl">
                        <img src="./images/login.images/chengxin.jpg" alt="诚信认证">
                    </a>
                    <a href="" target="_blank" title="中国图书网电子商务诚信认证" class="chengxin2 fl">
                        <img src="./images/ectrust.gif" alt="诚信认证">
                    </a>
                </div>
                <div class="licence fl fs12">
                    <p>
                        <a href="" target="_blank">京ICP备09013606号-3</a>
                        <a href="" target="_blank">京信市监发[2002]122号</a>
                        <span>海淀公安分局备案编号：1101083394</span>
                    </p>
                    <p>
                        <a href="" target="_blank">营业执照出版物经营许可证</a>
                        <a href="#" target="_blank">京出发京批字第直110071</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 侧边 -->
    <div class="cusSer">
        <div class="cusSerIn">
            <div class="slide_min fs14">联系客服</div>
        </div>
    </div>

</body>

</html>

<script>


    $(function () {

        //只能校验输入之后吗?
        $(".loginForm").validate({
            rules: {
                uphone: {
                    required: true,
                    digits: true, //整形
                    rangelength: [11, 11],
                },
                upwd: {
                    required: true,
                    rangelength: [6, 18]
                },
            },

            messages: {
                uphone: {
                    required: "请输入注册的手机号",
                    digits: "手机号不合法",
                    rangelength: "请输入11位手机号",
                },
                upwd: {
                    required: "请输入密码",
                    rangelength: "请输入6到16位密码",
                },
            },

            submitHandler() {
                $.ajax({
                    url: "./account/login",
                    type: "post",
                    data: $("form").serialize()
                }).then(function (response) {

                    if (response.status == 200) {
                        layer.msg("登录成功");
                        setTimeout(function () {
                            location = "index.html";
                            // location.href=

                        }, 1000)
                    } else {
                        layer.msg("登录失败,用户名或密码错误!")
                    }

                })
                return false;
            }


        })


        $("input").on("focus", function () {
            $(this).parents(".inputWrap").css({
                "border": "1px #666 solid"
            })
        }).on("blur", function () {
            $(this).parents(".inputWrap").css({
                "border": "1px #e60000 solid"
            })
        })

        // $.validator.addMethod("checkName", function () {
        // })//自己的规则


    })

</script>